<template>
  <div class="creatlist">
    <div class="user">
      <img src="" alt="" />
      <span></span>
    </div>
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item icon="" text="创建歌单" @click="creatlist(id)" />
      <van-grid-item icon="" text="收藏歌单" @click="liststar(id)" />
      <van-grid-item icon="" text="歌单助手" @click="listhelper(id)" />
    </van-grid>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
      <div
        class="mylist"
        v-for="item in list"
        :key="item._id"
        @click="detail(item.id)"
      >
        <div class="mylistleft">
          <img :src="item.coverImgUrl" alt="" />
          <div class="lmylist">
            <p>{{ item.name }}</p>
            <span>{{ item.tags.toString() }}</span>
          </div>
        </div>
        <div class="selectbox">
          <van-icon name="bars" @click.stop="delplay(item.id)" />
          <van-icon name="delete" @click.stop="deleplay(item.id)" />
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
export default {
  data() {
    return {
      show: false,
      list: [],
      loading: false,
      finished: true,
      value: '',
      playlist: [],
      Loop: [],
      id: '',
    }
  },
  computed: {},
  watch: {},
  methods: {
    // touchstart() {
    //   clearInterval(this.Loop) //再次清空定时器，防止重复注册定时器
    //   this.Loop = setTimeout(
    //     function () {
    //       this.selectbox = true
    //       console.log()
    //       console.log(this.selectbox)
    //     }.bind(this),
    //     1000
    //   ) // 这里的1000是指需要长按的时间，单位为ms
    // },
    // touchend() {
    //   // 这个方法主要是用来将每次手指移出之后将计时器清零
    //   clearInterval(this.Loop)
    // },
    //删除歌单
    deleplay(id) {
      axios
        .get(`http://localhost:3000/playlist/delete?id=${id}`)
        .then((res) => {
          console.log(res, '删除成功')
          if (res.data.code === 200) {
            Toast('删除成功')
            location.reload
          }
        })
    },
    //取消收藏
    delplay(id) {
      axios
        .get(`http://localhost:3000/playlist/subscribe?t=2&id=${id}`)
        .then((res) => {
          console.log(res, '取消收藏')
          if (res.data.code === 200) {
            Toast('取消收藏')
            location.reload
          }
        })
    },
    onLoad() {},
    //跳转创建歌单
    creatlist(id) {
      this.$router.push('/creatlist/' + id)
    },
    //跳转歌单收藏
    liststar(id) {
      this.$router.push('/liststar/' + id)
    },
    //跳转歌单助手
    listhelper(id) {
      this.$router.push('/listhelper/' + id)
    },
    //获取用户收藏歌单
    getuserlist(id) {
      axios
        .get('http://localhost:3000/user/playlist', {
          params: {
            uid: id,
          },
        })
        .then((res) => {
          console.log(res, 666)
          if (res.status === 200) {
            this.list = res.data.playlist
          }
        })
    },
    //跳转歌单详情
    // detail(id) {
    //   this.$router.push(`/songlistdetail/${id}`)
    // },
    detail(id) {
      this.$router.push(`/listdetail/${id}`)
    },
  },
  created() {
    const id = this.$route.params.id
    this.id = id
    console.log(this.id)
    // const uid = '1587708982'
    this.getuserlist(id)
  },
  mounted() {},
  components: {},
}
</script>
<style scoped>
.creatlist {
  padding: 15px;
}
.mylist {
  padding: 10px;
  background-color: white;
  /* overflow: hidden; */
  position: relative;
}
.mylist::after {
  content: '';
  clear: both;
  display: block;
}

.mylistleft {
  float: left;
}
.mylistleft img {
  float: left;
  width: 50px;
  height: 50px;
}
.mylistleft .lmylist {
  float: left;
}
.mylistleft .lmylist p {
  width: 260px;
  line-height: 30px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
}
.mylistleft .lmylist span {
  font-size: 12px;
}
.selectbox {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 25px;
  right: -12px;
}
.select {
  display: block;
  width: 50px;
  height: 25px;
  background-color: #4a4a4a;
  color: white;
  text-align: center;
  border-radius: 15px;
}
.content {
  padding: 16px 16px 160px;
}
</style>
